<template>
 <div class="common-layout">
    <el-container>
      <el-aside width="200px" height="1000px">
             <br><br><br>
          <div class="hezi" ><img src="./assets/aaa.png" alt="" class="tupian"></div><br><br>
       <br><br><br>
         <el-icon><odometer /></el-icon>
         <router-link to="/xacda0" class="ll"> 仪表盘</router-link>      
<div class="demo-collapse">
    <el-collapse accordion class="b">
      <el-collapse-item name="1" class="a">
        <template #title>
          <el-icon><grid /></el-icon>
         常用设置
          
          <el-icon class="header-icon">
            <info-filled />
          </el-icon>
          
        </template>

        <div>
         <router-link to="/xacda1" class="ll"> 教师管理   </router-link>
        </div><br>
        <div>
        <router-link to="/xacda2" class="ll">学生管理</router-link>
        </div>
        <div><br>
        <router-link to="/xacda3" class="ll"> 公告管理</router-link>
        </div>
        <div><br>
        <router-link to="/xacda4" class="ll"> 系统配置</router-link>
        </div>
         <div><br>
        <router-link to="/xacda5" class="ll"> 判断服务器</router-link>
        </div>
        
      </el-collapse-item>
      
      <el-collapse-item name="2">
        <template #title>
          <el-icon><aim /></el-icon>
          问题<el-icon class="header-icon">
            <info-filled />
          </el-icon>
        </template>
        <div>
         <router-link to="/xacda6" class="ll">问题列表</router-link>
        </div><br>
        <div>
        <router-link to="/xacda7" class="ll"> 增加题目</router-link>
        </div>
         <div><br>
         <router-link to="/xacda8" class="ll">导入导出题目</router-link>
        </div>
      </el-collapse-item>
         
             
          <el-collapse-item name="3">
        <template #title>
         <el-icon><trophy /></el-icon>
          比赛&练习<el-icon class="header-icon">
            <info-filled />
          </el-icon>
        </template>
        <div>
        <router-link to="/xacda9" class="ll">比赛列表</router-link>
        </div>
        <div><br>
        <router-link to="/xacda10" class="ll"> 创建比赛</router-link>
        </div>
      </el-collapse-item>

        
      <el-collapse-item name="4" >
        <template #title >
        <el-icon ><collection /></el-icon>
         课程<el-icon>
            <info-filled />
          </el-icon>
        
        </template>
        
        <div>
       <router-link to="/xacda11" class="ll"> 课程列表</router-link>
        </div><br>
        <div>
       <router-link to="/xacda12" class="ll"> 创建课程</router-link>
        </div>
      </el-collapse-item>
     
    
    </el-collapse>
 </div>

      </el-aside>
      <el-container>
        <el-header class="colo1">

           <el-dropdown class="xiaotubiao2">
    <span class="el-dropdown-link">
     username
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>logout</el-dropdown-item>
      </el-dropdown-menu>

    </template>
  </el-dropdown>

          <el-icon class="xiaotubiao1"><share /></el-icon>
          <el-icon class="xiaotubiao"><search /> </el-icon>

        </el-header>
        <el-main class="colo2">

          <el-card class="box-card" >
    <template #header >
      <div class="card-header">
        <span>标题</span>
        
      </div>
    </template>
     <router-view class="ll"></router-view>
  </el-card>
          
        </el-main>

        <el-footer class="colo3">fotter</el-footer>
      </el-container>

      
    </el-container>
  </div>

</template>
<script>
 import { Odometer,Grid, Aim,Trophy, Collection, Search,Share,ArrowDown} from '@element-plus/icons-vue'
export default{
  name:'App',
  components:{
    Odometer,
    Grid,
   Aim,
   Trophy,
   Collection,
   Search,
   Share,
   ArrowDown

    
  }
}

</script>
<style>
.box-card{
  height: 600px;
}
.ll{
 text-decoration: none;
  text-align: center;

}
 


.xiaotubiao2{
  float: right;
}
.xiaotubiao1{
  float: right;
  
}
.xiaotubiao{
  float: right;
  
}


.demo-collapse{
  height: 500px;
}
.hezi{
    
   display: flex;
  justify-content: center;
  align-items: center; 
}
.tupian{
  width: 60px;
  height: 60px;
  
}
.yanse{
  background-color: #F2F6FC;
}
.colo1{
  background-color: #EDECEC;
}
.colo2{
  background-color: #E4E7ED;
}
.colo3{
  background-color: #E4E7ED;
}
</style>
